<!-- 统计卡片 -->
<template>
  <el-row :gutter="15">
    <el-col :lg="5"
            :md="12">
      <el-card class="analysis-chart-card"
               shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">技师数量</div>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading"
             style="padding-top: 0px">
          <vue-count-up class="Num"
                        :end-val="
              saleData.technicianCount ? saleData.technicianCount : '0'
            " />
        </div>

        <div class="analysis-chart-card-content"> </div>
        <el-divider />
      </el-card>
    </el-col>
    <el-col :lg="5"
            :md="12">
      <el-card class="analysis-chart-card"
               shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">订单数量</div>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          <vue-count-up class="Num"
                        :end-val="saleData.orderCount ? saleData.orderCount : '0'" />
        </div>
        <div class="analysis-chart-card-content">
          <v-chart ref="visitChart"
                   style="height: 40px"
                   :option="visitChartOption" />
        </div>
        <el-divider />
      </el-card>
    </el-col>
    <el-col :lg="5"
            :md="12">
      <el-card class="analysis-chart-card"
               shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">用户数量</div>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          <vue-count-up class="Num"
                        :end-val="saleData.userCount ? saleData.userCount : '0'" />
        </div>
        <div class="analysis-chart-card-content">
          <v-chart ref="payNumChart"
                   style="height: 40px"
                   :option="payNumChartOption" />
        </div>
        <el-divider />
      </el-card>
    </el-col>
    <el-col :lg="5"
            :md="12">
      <el-card class="analysis-chart-card"
               shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">总充值余额</div>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          <vue-count-up class="Num"
                        :options="countUpOptions"
                        :end-val="
              saleData.discountedPriceTotal
                ? saleData.discountedPriceTotal
                : '0'
            " />
        </div>
        <div class="analysis-chart-card-content">
          <v-chart ref="payNumChart"
                   style="height: 40px"
                   :option="payNumChartOption" />
        </div>
        <el-divider />
      </el-card>
    </el-col>
    <el-col :lg="4"
            :md="12">
      <el-card class="analysis-chart-card"
               shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">总消费金额</div>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading"
             style="padding-top: 0px">
          <vue-count-up class="Num"
                        :options="countUpOptions"
                        :end-val="
              saleData.disbursementsTotal ? saleData.disbursementsTotal : '0'
            " />
        </div>
        <div class="analysis-chart-card-content"> </div>
        <el-divider />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { getDataStatistics } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';

import VueCountUp from 'vue-countup-v2';

use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);

export default {
  name: 'StatisticsCard',
  components: { VChart, VueCountUp },
  mixins: [echartsMixin(['visitChart', 'payNumChart'])],
  data () {
    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        decimalPlaces: 2,
        prefix: '',
        suffix: ''
      },
      // 访问量折线图配置
      visitChartOption: {},
      // 支付笔数柱状图配置
      payNumChartOption: {},
      saleData: {},
      payCount: 0,
      videoData: {
        count: 0,
        d_count: 0
      },
      mealData: {
        sum_price: 0,
        cur_count: 0,
        sum_count: 0
      },
      parms: {
        page: 1,
        limit: 10
      },
      agency_parms: {
        page: 1,
        limit: 10,
        oemType: 1
      }
    };
  },
  created () {
    // this.getPayNumData();
    this.init();
  },
  methods: {
    async init () {
      this.saleData = await getDataStatistics({
        siteId: this.$store.state.site.info.id
      });
    },
    /* 获取数据 */
    getPayNumData () {
      getAdminSaleData()
        .then((data) => {
          this.saleData = data;

          this.visitChartOption = {
            color: '#975fe5',
            tooltip: {
              trigger: 'axis',
              formatter:
                '<i class="ele-chart-dot" style="background: #975fe5;"></i>{b0}: {c0}'
            },
            grid: {
              top: 10,
              bottom: 0,
              left: 0,
              right: 0
            },
            xAxis: [
              {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: data.date
              }
            ],
            yAxis: [
              {
                show: false,
                type: 'value',
                splitLine: {
                  show: false
                }
              }
            ],
            series: [
              {
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.reserve_value
              }
            ]
          };

          this.payNumChartOption = {
            tooltip: {
              trigger: 'axis',
              formatter:
                '<i class="ele-chart-dot" style="background: #5b8ff9;"></i>{b0}: {c0}'
            },
            grid: {
              top: 10,
              bottom: 0,
              left: 0,
              right: 0
            },
            xAxis: [
              {
                show: false,
                type: 'category',
                data: data.month
              }
            ],
            yAxis: [
              {
                show: false,
                type: 'value',
                splitLine: {
                  show: false
                }
              }
            ],
            series: [
              {
                type: 'bar',
                data: data.recharge_value
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>

<style scoped>
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}
</style>
